/* style.css - CSS unique pour tout le site */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    --vert: #aadf4f;
    --noir: #191919;
}

body {
    font-family: 'Zalando Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.4;
    color: #000;
    width: 100%;
    overflow-x: hidden;
    background: var(--vert);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    
}

/* ===== HEADER avec background vert ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: 60px;
    background: var(--vert);
    z-index: 1000;
}


.header-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    max-width: 100%;
    margin: 0 auto;

}

.header-logo {
    flex: 0 0 auto;
    width: 160px;
    display: flex;
    align-items: center;
}

.logo {
    object-fit: contain;
    height: 30px;
    width: auto;
    flex-shrink: 0;
    margin-top: 15px;
}

.nav {
    display: flex;
    gap: 8px;
    flex-grow: 1;
    justify-content: center;
    margin-top: 10px;
}

.nav-link {
    text-decoration: none;
    color: #000;
    font-weight: 200;
    font-size: 18px;
    padding: 12px 30px;
    height: 16px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 40px;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-top: 10px;
}

.nav-link:hover {
    border: 1px solid rgba(0, 0, 0, 0.4);
    background: transparent;
    height: 16px;
}

.nav-link.active {
    background: #fff;
    color: #000;
    border: 0;
    height: 16px;
}

.btn-login {
    background: #000;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-family: 'Zalando Sans', sans-serif;
    margin-top: 12px;

}

.btn-login:hover {
    transform: scale(1.05);
    background: #8ab83b;
    color: #000;
}



/* ===== HERO SECTION - tout vert avec illustration droite ===== */
.hero {
    margin-top: 10px;
    display: flex;
    min-height: calc(100vh - 150px);
    max-width: 100%;
    background: var(--vert);
    position: relative;
}


.hero-left {
    flex: 0 0 50%;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero h1 {
    font-size: 70px;
    font-weight: 900;
    line-height: 1.1;
    color: #1d1d1d;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    text-shadow: 1px 0 #000;
    ;
}

.arrow-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-bottom: 2px;
    height: 100px;
}

.hero-subtitle {
    font-size: 24px;
    font-weight: 150;
    color: #000;
    margin-bottom: 40px;
    line-height: 1.3
}

.hero-features {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 1600px;
    margin: 40px auto 0;
    padding: 0 40px;
    justify-content: center;
    /* Centrer horizontalement */
}

.hero-feature {
    border: 1px solid rgba(0, 0, 0, 0.75);
    border-radius: 40px;
    padding: 14px 26px;
    font-size: 20px;
    font-weight: 700;
    color: #181818;
    background: transparent;
    
    /* Flexbox pour aligner SVG + texte verticalement */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* Ensure proper line-height */
    line-height: 1;
}

/* SVG dans hero-feature : alignement parfait */
.hero-feature svg {
    flex-shrink: 0;
    display: block;
    width: 30px;
    height: 30px;
}

/* Illustration droite jusqu'au bord */
.hero-right {
    flex: 1;
    position: relative;
    background: #fff;
    border-radius: 40px 0 0 40px;
    overflow: visible;
    margin-right: 0;
    margin-top: 100px;
    height: 534px;

}

.hero-div {
    width: 100%;
    height: 100%;

}

.hero-illustration {
    
    height: 100%;
    background: #1d1d1d;
    border-radius: 40px 0 0 40px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    border-right: 0;
}

/* Bouton CTA à cheval sur le border bottom - position absolue dans hero-right */
.cta-button {
    position: absolute;
    bottom: -38px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff2c2c;
    color: #fff;
    text-decoration: none;
    padding: 20px 50px;
    font-size: 30px;
    font-weight: 700;
    border-radius: 40px;
    transition: all 0.3s ease;
    white-space: nowrap;
    z-index: 100;
    text-align: center;
    line-height: 80%;
}

.cta-button:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1),0 4px 4px rgba(0, 0, 0, 0.2),0 15px 30px rgba(0, 0, 0, 0.4);
}

.cta-button2 {
    position: relative;
    bottom: 1px;
    background: #ff2c2c;
    color: #fff;
    text-decoration: none;
    padding: 18px 40px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 40px;
    transition: all 0.3s ease;
    white-space: nowrap;
    z-index: 100;
}

.cta-button2:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 8px 4px rgba(0, 0, 0, 0.2),0 15px 30px rgba(0, 0, 0, 0.4);
}

.cta-button3 {
    margin: 20px auto 0;
    display: block;
    width: fit-content;
    background: #ff2c2c;
    color: #fff;
    text-decoration: none;
    padding: 18px 40px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 40px;
    transition: all 0.3s ease;
    white-space: nowrap;

}

.cta-button3:hover {
    
    box-shadow: 0 8px 4px rgba(0, 0, 0, 0.2),0 15px 30px rgba(0, 0, 0, 0.4);
}

/* ===== CARD SENARI C'EST QUOI ===== */
.about-section {
    background: var(--vert);
    padding: 80px 0 100px;
    position: relative;
}

.about-card {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--vert);

    border: 1px solid rgba(0, 0, 0, 0.25);


    border-radius: 40px;
    padding: 20px;
    text-align: left;
    position: relative;
    
}

.about-card h2 {
    font-size: 28px;
    color: #2a2e28;
    
    font-weight: 700;
}

.about-card p {
    font-size: 16px;
    color: #000;
    line-height: 1.7;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.founder{
    max-width: 1200px;
    margin: 0 auto;
    background: var(--vert);

     border: 1px solid rgba(0, 0, 0, 0.25);


    border-radius: 40px;
    padding: 20px;
    text-align: left;
    position: relative;
    
}
  
.founder h2 {
    font-size: 28px;
    color: #2a2e28;
    
    font-weight: 700;
}
.founder h3 {
    font-size: 18px;
    color: #45752e;
    margin-bottom: 30px;
    font-weight: 300;
}

.founder p {
    font-size: 16px;
    color: #000;
    line-height: 1.7;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
/* ============================================
   FOUNDER CARDS - Section Les Fondateurs
   ============================================ */

.founders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.founder-card {
    background: none;
     border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.founder-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2),0 10px 30px rgba(0, 0, 0, 0.1);
}

.founder-photo {
    width: 228px;
    height: 296px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 2px solid #d3d3d3;
}

.founder-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px 0;
}

.founder-role {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin: 0 0 20px 0;
    font-style: italic;
}

.founder-quote {
    background: #aadf4f;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    text-align: left;
    width: 100%;
}

.founder-quote svg {
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 0.5;
}

.founder-quote p {
    font-size: 14px;
    line-height: 1.6;
    color: #000;
    margin: 0;
    padding-left: 30px;
}

/* Responsive */
@media (max-width: 1024px) {
    .founders-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .founder-photo {
        width: 180px;
        height: 234px;
    }
}

@media (max-width: 768px) {
    .founder-card {
        padding: 20px;
    }
    
    .founder-photo {
        width: 160px;
        height: 208px;
    }
}


/* Bouton SE CONNECTER à cheval sur le border bottom */
.btn-connect {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    border: none;
    padding: 18px 45px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Zalando Sans', sans-serif;
    z-index: 10;
}

.btn-connect:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}


/* ===== PREUVE ===== */
/* Proof Quote Section */
.proof-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 60px 40px;
    background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
    margin-top: 40px;
}

.proof-stat {
    text-align: center;
    flex: 1;
}

.proof-stat h3 {
    font-size: 56px;
    font-weight: 700;
    color: #24342c;
    margin: 0;
    font-family: 'Zalando Sans', sans-serif;
    letter-spacing: -1px;
}

.proof-stat p {
    font-size: 16px;
    color: #666;
    margin-top: 12px;
    font-weight: 400;
}

/* ===== PROOF QUOTE ===== */

.proof-quote::before {
    content: '"';
    font-size: 64px;
    color: #24342c;
    opacity: 0.2;
    position: absolute;
    top: -10px;
    left: 16px;
    font-family: Georgia, serif;
}

.proof-quote {
    position: relative;
    flex: 1;
    background: #ffffff;
    border-left: 4px solid #24342c;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(36, 52, 44, 0.08);
    transition: all 0.3s ease;
}

.proof-quote:hover {
    box-shadow: 0 8px 24px rgba(36, 52, 44, 0.12);
    transform: translateY(-2px);
}

.proof-quote p {
    font-size: 18px;
    font-weight: 500;
    color: #24342c;
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 16px 0;
    letter-spacing: 0.3px;
}

.proof-quote small {
    display: block;
    font-size: 14px;
    color: #999;
    font-style: normal;
    font-weight: 400;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

/* Responsive */
@media (max-width: 768px) {
    .proof-section {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
    }

    .proof-stat h3 {
        font-size: 44px;
    }

    .proof-quote {
        padding: 24px;
        border-left: 3px solid #24342c;
    }

    .proof-quote p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .proof-section {
        padding: 30px 16px;
        gap: 20px;
    }

    .proof-stat h3 {
        font-size: 36px;
    }

    .proof-quote p {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .proof-quote small {
        font-size: 13px;
    }
}




/* ===== FONCTIONNALITÉS ===== */
.features-section {
    background: var(--vert);
    padding: 20px 0 100px;
    
}

.features-section h2 {
    text-align: center;
    font-size: 34px;
    color: #000;
    margin-bottom: 20px;
    font-weight: 200;
    text-transform: uppercase;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.purpose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.feature-card {
    background: var(--vert);
    border: 1px solid rgba(0, 0, 0, 0.25);
    padding: 40px 26px;
    border-radius: 40px;
    transition: all 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    background: #85b92a;
}

.feature-card h3 {
    font-size: 20px;
    color: #000;
    margin-bottom: 16px;
    font-weight: 700;
}

.feature-card p {
    font-size: 14px;
    color: #000;
    line-height: 1.6;
    font-weight: 400;
}

/* ===== FOOTER ===== */
.footer {
    background: #191919;
    color: #fff;
    padding: 24px 0 10px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-col h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a,
.footer-col address a {
    color: #999;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-col ul li a:hover,
.footer-col address a:hover {
    color: #fff;
}

.footer-logo {
    height: 30px;
    margin-bottom: 30px;

}

.footer-col address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    color: #999;
}

.footer-col address strong {
    color: #fff;
    display: block;
    margin-bottom: 8px;
}

/* Newsletter */
.newsletter-form {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.newsletter-form input {
    flex: 1;
    padding: 14px 20px;
    border: 1px solid #333;
    border-radius: 40px;
    background: #191919;
    color: #fff;
    font-size: 14px;
    font-family: 'Zalando Sans', sans-serif;
}

.newsletter-form input::placeholder {
    color: #666;
}

.newsletter-form button {
    padding: 14px 32px;
    background: #aadf4f;
    color: #000;
    border: none;
    border-radius: 40px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Zalando Sans', sans-serif;
}

.newsletter-form button:hover {
    transform: scale(1.05);
}

.newsletter-note {
    font-size: 11px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

.newsletter-note a {
    color: var(--vert);
    text-decoration: none;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.social-links a:hover {
    background: var(--vert);
}

.social-links img {
    width: 18px;
    height: 18px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero {
        flex-direction: column;
    }

    .hero-left,
    .hero-right {
        flex: none;
        width: 100%;
    }

    .hero-right {
        min-height: 400px;
        border-radius: 40px 40px 0 0;
    }
}

@media (max-width: 768px) {
    .nav {
        display: none;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-features {
        flex-direction: column;
    }

    .arrow-icon {
        width: 50px;
        height: 50px;
    }
}



/* ===== HAMBURGER + MENU MOBILE ===== */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background: #000;
    border-radius: 10px;
    transition: all 0.3s;
    transform-origin: 1px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.mobile-menu {
    position: fixed;
    top: 86px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(170, 223, 79, 0.98);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    padding: 40px;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-nav-link {
    color: #000;
    text-decoration: none;
    font-size: 24px;
    font-weight: 500;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: #fff;
    padding-left: 20px;
    background: rgba(255, 255, 255, 0.2);
}

.btn-login-mobile {
    margin-top: 30px;
    background: #000 !important;
    color: #fff !important;
    padding: 20px !important;
    border-radius: 40px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* ===== RESPONSIVE 992px ===== */
@media (max-width: 992px) {
    .hamburger {
        display: flex;
    }

    .desktop-nav,
    .desktop-btn {
        display: none !important;
    }

    .header-content {
        gap: 20px !important;
    }
}



/* SOLUTIONS */

.solutions-section {
    padding: 80px 0 80px;
    background: #aadf4f;

}

.solutions-hero {
    text-align: left;
    margin-bottom: 10px;
    text-align: center;

}

.solutions-hero h1 {
   font-size: 40px;
    font-weight: 700;
    color: #191919;
    line-height: 1.1;
    text-transform: uppercase;
}

.solutions-hero p {
    font-size: 24px;
    color: #191919;

    margin: 0;
    line-height: 1.6;
    font-weight: 100;
    text-align: center;

}

/* Layout 2 colonnes EXACT maquette */
.solutions-layout {
    display: grid;
    grid-template-columns: 1fr 388px;
    gap: 40px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

/* CARD GAUCHE BLANCHE - CAS D'USAGE */
.cas-usage-card {
    background: var(--noir);
    border: 1px solid #000;
    border-radius: 40px;
    padding: 14px 56px 56px;
    height: fit-content;
}

.cas-usage-card h2 {
    font-size: 60px;
    font-weight: 900;
    color: var(--vert);
    ;
    margin-bottom: 48px;
    line-height: .8
}

.cas-item {
    margin-bottom: 20px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cas-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.cas-item h3 {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.3;
}

.cas-item p {
    font-size: 16px;
    color: #d3d3d3;
    font-weight: 100;
    line-height: 1.6;
    margin: 0;
}

/* CARD DROITE VERTE - BÉNÉFICES */
.benefices-card {
    background: #aadf4f;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    border-radius: 40px;
    padding: 14px 40px 48px;
    height: fit-content;

    top: 140px;
}

.benefices-card h2 {
    font-size: 60px;
    font-weight: 900;
    color: #000;
    margin-bottom: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: .8;
}

.arrow-green {
    font-size: 24px;
    font-weight: 300;
    color: #000;
    flex-shrink: 0;
}

.benefice-item {
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.benefice-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.benefice-item h3 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
    line-height: 1.3;
}

.benefice-item p {
    font-size: 14px;
    color: #000;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* Bouton CTA NOIR */
.btn-benefices {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #000;
    color: #fff !important;
    text-decoration: none;
    padding: 18px 36px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-top: 20px;
    width: fit-content;
}

.btn-benefices:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.btn-benefices span {
    font-size: 20px;
    font-weight: 300;
}

/* RESPONSIVE MAQUETTE */
@media (max-width: 1200px) {
    .solutions-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .benefices-card {
        position: static;
    }
}

@media (max-width: 992px) {
    .solutions-hero h1 {
        font-size: 44px;
    }

    .solutions-section {
        padding: 100px 0;
    }

    .cas-usage-card,
    .benefices-card {
        padding: 48px 32px;
    }

    .cas-usage-card h2 {
        font-size: 28px;
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .solutions-hero h1 {
        font-size: 36px;
    }

    .solutions-hero p {
        font-size: 16px;

    }

    .container {
        padding: 0 20px;
    }

    .solutions-layout {
        gap: 32px;
    }
}



/* TARIFS */



.tarifs-section {
    padding: 80px 0 120px;
    background: #aadf4f;
}

.tarifs-hero {
    text-align: center;
    margin-bottom: 40px;
}

.tarifs-hero h1 {
    font-size: 40px;
    font-weight: 700;
    color: #191919;
    line-height: 1.1;
    text-transform: uppercase;
}


.tarifs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 60px;
}

.tarif-card {
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 40px;
    overflow: hidden;
    height: 360px;
    /* Réduit pour 1 ligne */
    transition: all 0.3s ease;
}

.tarif-card {
    transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tarif-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 4px rgba(0,0,0,0.3), 0 10px 30px rgba(0, 0, 0, 0.35); 
}





.card-top {
    background: #87df4f;
    padding: 24px 20px;
    /* Réduit */
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}

.card-top.green h2 {
    font-size: 20px;
    /* Réduit */
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    line-height: 1.2;
    text-shadow: rgba(0, 0, 0, 0.65) 0 0 3px;
}

.card-bottom {
    background: #fff;
    padding: 28px 24px;
    /* Réduit */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price {
    font-size: 26px;
    /* Réduit */
    font-weight: 700;
    color: #000;
    text-align: center;
    margin-bottom: 8px;
}

.seats,
.features,
.billing {
    font-size: 14px;
    /* Réduit */
    color: #333;
    text-align: center;
    margin-bottom: 6px;
}

.btn-cta {
    display: block;
    background: #aadf4f;
    color: #000;
    text-decoration: none;
    padding: 12px 20px;
    /* Réduit */
    border-radius: 40px;
    font-weight: 600;
    font-size: 13px;
    /* Réduit */
    text-align: center;
    margin-bottom: 12px;
    border: 1px solid #000;
    transition: all 0.3s;
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(170, 223, 79, 0.4);
}

.btn-cta.contact {
    background: #000;
    color: #fff;
}

.btn-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #666;
    text-decoration: none;
    font-size: 11px;
    /* Réduit */
    font-weight: 500;
    margin-top: auto;
}

.btn-details2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #666;
    text-decoration: none;
    font-size: 11px;
    /* Réduit */
    font-weight: 500;
    
}

.btn-details3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #666;
    text-decoration: none;
    font-size: 11px;
    /* Réduit */
    font-weight: 500;
    margin-top: 18px;
}

.arrow-down {
    width: 14px;
    /* Réduit */
    height: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
    .tarifs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .tarif-card {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .tarifs-grid {
        grid-template-columns: 1fr;
    }

    .tarif-card {
        height: 420px;
    }
}

/* À ajouter à la FIN de votre style.css - TABLEAU DÉTAILS PIXEL PERFECT */

.details-table {
    background: #fff;
    border: 1px solid #000;
    border-radius: 40px;
    overflow: hidden;
    margin-top: 40px;
}

.table-container {
    overflow-x: auto;
}

.table-rowtitres {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr 1fr;
    height: 42px;
    align-items: center;

}

.table-row {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr;
    height: 42px;
    align-items: center;

}

.header-row {
    background: #000;
}

.header-row .feature-name,
.header-row .plan-header {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    padding: 0 20px;

}

.feature-name.black {
    color: #000 !important;
    font-weight: 500;
    font-size: 13px;
    padding-left: 24px;
    text-align: left;
}
.feature-name.desactived {
    color: rgba(32, 32, 32, 0.3) !important;

    font-weight: 500;
    font-size: 13px;
    padding-left: 24px;
    text-align: left;
}

.white-row {
    background: var(--vert);
}

.green-row {
    background: #99c847;
}

.plan-cell {
    display: flex;
    align-items: center;
    height: 42px;
    color: #fff;
    font-weight: 700;
    text-shadow: rgba(0, 0, 0, 0.5) -1px 1px 1px;
}

.check-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .table-row {
        grid-template-columns: 2fr 1fr 1fr;
        height: 48px;
    }
}

/* FORMULAIRE CONTACT */

.contact-section {
    padding: 80px 0 120px;
    background: #aadf4f;
}

.contact-hero {
    text-align: center;
    margin-bottom: 20px;
}

.contact-hero h1 {
    font-size: 40px;
    font-weight: 700;
    color: #191919;
    line-height: 1.1;
    text-transform: uppercase;
}

.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-form {
    background: #fff;
    border: 1px solid #191919;
    border-radius: 40px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 0px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}

.form-group.required label::after {
    content: '*';
    color: #ff2c2c;
    margin-left: 4px;
}

.form-group label {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
}

.form-group input,
.form-group select,
.form-group textarea {
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 16px 20px;
    font-size: 16px;
    font-family: 'Zalando Sans', sans-serif;
    background: #fff;
    transition: all 0.3s ease;
    height: 56px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #aadf4f;
    box-shadow: 0 0 0 3px rgba(170, 223, 79, 0.1);
}

.form-group textarea {
    height: 120px;
    resize: vertical;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 48px;
}

.submit-btn {
    background: #000;
    color: #fff;
    border: none;
    padding: 20px 48px;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Zalando Sans', sans-serif;
    width: 100%;
    margin-top: 16px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    background: #333;
}

/* Responsive */
@media (max-width: 992px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contact-form {
        padding: 48px 32px;
        margin: 0 20px;
    }

    .contact-hero h1 {
        font-size: 44px;
    }
}

@media (max-width: 768px) {
    .contact-hero h1 {
        font-size: 36px;
    }

    .contact-form {
        padding: 40px 24px;
    }
}
/* ===== SYSTÈME D'ONGLETS ===== */
.tabs-container {
    background: var(--vert);
    padding: 0 0 20px;
    display: flex;
    justify-content: center;
}

.tabs-wrapper {
    display: flex;
    gap: 20px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 40px;
    padding: 8px;
}

.tab-btn {
    padding: 14px 40px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    border-radius: 32px;
    background: transparent;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Zalando Sans', sans-serif;
}

.tab-btn:hover {
    background: rgba(170, 223, 79, 0.2);
}

.tab-btn.active {
    background: #000;
    color: #fff;
}

/* ===== SECTIONS AVEC ONGLETS ===== */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tuto-section {
    background: var(--vert);
    padding: 0 0 40px;
}

.tuto-content {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #191919;
    border-radius: 40px;
    padding: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.tuto-content h2 {
    font-size: 42px;
    font-weight: 700;
    color: #191919;
    margin-bottom: 30px;
}

.tuto-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

/* Responsive */
@media (max-width: 768px) {
    .tabs-wrapper {
        flex-direction: column;
        gap: 10px;
        width: 90%;
        margin: 0 auto;
    }

    .tab-btn {
        padding: 12px 20px;
        font-size: 16px;
    }

    .tuto-content {
        padding: 40px 30px;
    }

    .tuto-content h2 {
        font-size: 32px;
    }
}

/* TUTO SECTION */
.tuto-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 20px;
}

.tuto-grid-section {
    margin-bottom: 60px;
}

.tuto-section-header {
    text-align: center;
    margin-bottom: 18px;
}

.tuto-section-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0;
}

.tuto-section-header p {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

.tuto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
}

.tuto-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--border);
}

.tuto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.tuto-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.tuto-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.tuto-text {
    padding: 20px;
}

.tuto-text h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.tuto-text p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .tuto-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .tuto-section-header h2 {
        font-size: 24px;
    }
}

/* ============================================
   PARALLAX SECTION
   ============================================ */

.parallax-section {
  position: relative;
  width: 100%;
  height: 980px;
  overflow: hidden;
  background-color: #000000;
}

.parallax-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.parallax-image {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: auto;
  object-fit: cover;
  transform: translateX(-50%);
  will-change: transform;
}


/* ========================================================================
   CORRECTIONS MOBILE - 9 PROBLÈMES CRITIQUES
   À ajouter à la FIN de style.css existant
   ⚠️ NE MODIFIE PAS LE DESIGN DESKTOP (>1200px reste identique)
   ======================================================================== */

/* ============================================
   PROBLÈME 1: BREAKPOINTS INTERMÉDIAIRES MANQUANTS
   Solution: Ajout de breakpoints 480px, 600px, 900px, 1024px
   ============================================ */

/* Breakpoint 1024px - Tablettes landscape */
@media (max-width: 1024px) {
  .container {
    padding: 0 20px;
  }

  /* Optimisation grids */
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Breakpoint 900px - Tablettes portrait */
@media (max-width: 900px) {
  /* PROBLÈME 2 RÉSOLU: Hero passe en colonne plus tôt */
  .hero {
    flex-direction: column;
  }

  .hero-left,
  .hero-right {
    flex: none;
    width: 100%;
  }

  .hero-left {
    margin-top: 40px;
    padding: 60px 40px;
  }

  .hero h1 {
    font-size: 56px;
  }

  .hero-subtitle {
    font-size: 20px;
  }

  .hero-right {
    margin-top: 40px;
    min-height: 400px;
    border-radius: 40px 40px 0 0;
  }

  .hero-illustration {
    border-radius: 40px 40px 0 0;
  }

  /* Solutions layout en 1 colonne */
  .solutions-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .benefices-card {
    position: static;
  }
}

/* Breakpoint 600px - Grands mobiles */
@media (max-width: 600px) {
  /* PROBLÈME 4 RÉSOLU: Tarifs-grid progressive */
  .tarifs-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tarif-card {
    height: auto;
    min-height: 380px;
  }

  /* Footer en 1 colonne */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* PROBLÈME 6 RÉSOLU: Parallax hauteur adaptée */
  .parallax-section {
    height: 400px;
  }

  /* Désactiver l'effet parallax sur mobile pour performance */
  .parallax-image {
    position: relative !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* Breakpoint 480px - Petits mobiles */
@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .header-content {
    padding: 0 16px;
  }

  /* Hero optimisé petits écrans */
  .hero-left {
    margin-top: 40px;
    padding: 40px 20px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .hero-subtitle {
    font-size: 18px;
  }

  .arrow-icon {
    height: 60px;
  }

  .hero-features {
    padding: 0 20px;
    gap: 10px;
  }

  .hero-feature {
    font-size: 16px;
    padding: 12px 20px;
  }

  .hero-feature svg {
    width: 24px;
    height: 24px;
  }

  /* CTA buttons adaptatifs - PROBLÈME 2 */
  .cta-button {
    padding: 16px 32px;
    font-size: 22px;
    white-space: normal;
    line-height: 1.2;
  }

  .cta-button2,
  .cta-button3 {
    padding: 14px 28px;
    font-size: 18px;
    white-space: normal;
  }

  /* Parallax encore plus petit */
  .parallax-section {
    height: 300px;
  }

  /* Features grid 1 colonne */
  .features-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }

  /* Formulaire contact optimisé */
  .contact-form {
    padding: 30px 20px;
    margin: 0 16px;
  }
}

/* ============================================
   PROBLÈME 3: PURPOSE-GRID SANS RESPONSIVE
   Solution: Ajout de breakpoints pour .purpose-grid
   ============================================ */

@media (max-width: 1024px) {
  .purpose-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .purpose-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
}

/* ============================================
   PROBLÈME 4: TARIFS-GRID ET TABLE-ROW
   Solution: Adaptation progressive + scroll horizontal
   ============================================ */

@media (max-width: 1024px) {
  .tarifs-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .tarifs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Table-row: activer scroll horizontal */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .details-table {
    margin: 40px 16px;
  }

  /* Ajouter indicateur visuel scroll */
  .table-container::after {
    content: '→ Faites défiler →';
    display: block;
    text-align: center;
    padding: 8px;
    background: #aadf4f;
    font-size: 12px;
    font-weight: 600;
  }
}

@media (max-width: 600px) {
  /* Table-row réduit à 3 colonnes essentielles */
  .table-row {
    grid-template-columns: 2fr repeat(2, 1fr);
  }

  .table-rowtitres {
    grid-template-columns: 2fr repeat(2, 1fr);
  }

  /* Masquer colonnes 4, 5, 6 */
  .table-row > :nth-child(n+4),
  .table-rowtitres > :nth-child(n+4) {
    display: none;
  }

  /* Retirer indicateur si colonnes masquées */
  .table-container::after {
    display: none;
  }
}

/* ============================================
   PROBLÈME 5: TUTO-GRID MINMAX(380PX)
   Solution: Réduire minimum et passer en 1 colonne
   ============================================ */

@media (max-width: 768px) {
  .tuto-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 480px) {
  .tuto-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================
   PROBLÈME 7: ENTREPRISE.HTML FLEX NON RESPONSIVE
   Solution: Forcer colonne sur styles inline avec !important
   ============================================ */

@media (max-width: 768px) {
  /* Cibler les sections avec flex inline dans about-card */
  .about-card > div[style*="display: flex"],
  .about-card > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Forcer width 100% sur les enfants avec flex */
  .about-card > div > div[style*="flex:"],
  .about-card > div > div[style*="flex :"] {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Images et videos en entreprise.html */
  .about-card img,
  .about-card video {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Centrer bouton */
  .about-card .btn-connect {
    position: relative;
    bottom: 0;
    left: 0;
    transform: none;
    margin: 30px auto 0;
    display: block;
    width: fit-content;
  }
}

/* ============================================
   PROBLÈME 8: IMAGES NON OPTIMISÉES
   Solution: Ajout de styles pour images responsive
   ============================================ */

/* Base pour toutes les images */
img {
  max-width: 100%;
  height: auto;
}

/* Videos responsive */
video {
  max-width: 100%;
  height: auto;
}

/* Hero illustration spécifique */
@media (max-width: 768px) {
  .hero-illustration,
  .hero-div video {
    object-fit: cover;
    max-height: 400px;
  }

  .hero-right {
    height: auto;
    min-height: 350px;
    max-height: 400px;
  }
}

@media (max-width: 480px) {
  .hero-illustration,
  .hero-div video {
    max-height: 300px;
  }

  .hero-right {
    min-height: 280px;
    max-height: 300px;
  }
}

/* Parallax image adaptative */
@media (max-width: 768px) {
  .parallax-image {
    width: auto;
    height: 100%;
    object-fit: cover;
  }
}

/* Photos fondateurs ratio maintenu */
@media (max-width: 1024px) {
  .founder-photo {
    width: 180px;
    height: 234px;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .founder-photo {
    width: 160px;
    height: 208px;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .founder-photo {
    width: 140px;
    height: 182px;
    object-fit: cover;
  }
}

/* ============================================
   OPTIMISATIONS ADDITIONNELLES MOBILE
   ============================================ */

/* Meilleure gestion du menu mobile */
@media (max-width: 768px) {
  .mobile-menu {
    top: 60px; /* Hauteur fixe du header au lieu de 86px */
  }
}

/* Touch targets minimum 44px */
@media (max-width: 768px) {
  .mobile-nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  button,
  .btn-login,
  .btn-cta,
  .nav-link {
    min-height: 44px;
  }
}

/* Container padding cohérent */
@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }

  .features-grid,
  .purpose-grid,
  .hero-features {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .features-grid,
  .purpose-grid,
  .hero-features {
    padding: 0 16px;
  }
}

/* ============================================
   FIN DES CORRECTIONS CRITIQUES
   ⚠️ Design desktop (>1200px) totalement préservé
   ============================================ */

/* ========================================================================
   CORRECTIONS MOBILE - HAUTE PRIORITÉ (19 PROBLÈMES MOYENS)
   À ajouter APRÈS les corrections critiques dans style.css
   Navigation, Typographie, Touch Targets, Performance
   ======================================================================== */

/* ============================================
   NAVIGATION OPTIMISÉE
   ============================================ */

/* Hamburger apparaît à 900px au lieu de 992px */
@media (max-width: 900px) {
  .hamburger {
    display: flex !important;
  }

  .desktop-nav,
  .desktop-btn {
    display: none !important;
  }

  .header-content {
    gap: 20px !important;
  }
}

/* Menu mobile : meilleurs touch targets et espacement */
@media (max-width: 900px) {
  .mobile-menu {
    top: 60px; /* Hauteur précise du header */
    padding: 32px 24px; /* Padding optimisé */
  }

  .mobile-nav {
    gap: 8px; /* Gap réduit entre items */
  }

  .mobile-nav-link {
    min-height: 48px; /* Touch target >= 44px */
    padding: 14px 16px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 4px;
  }

  .mobile-nav-link:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.98);
  }

  .btn-login-mobile {
    min-height: 56px !important;
    padding: 16px 24px !important;
    margin-top: 24px;
  }
}

/* Header padding amélioré sur petits écrans */
@media (max-width: 600px) {
  .header-content {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 0 12px;
  }

  .header-logo {
    width: 140px;
  }

  .logo {
    height: 26px;
  }
}

/* ============================================
   TYPOGRAPHIE PROGRESSIVE
   Transitions fluides des font-sizes
   ============================================ */

/* Hero h1 : progression 70px → 60px → 56px → 48px → 38px → 32px */
@media (max-width: 1200px) {
  .hero h1 {
    font-size: 60px;
  }
}

@media (max-width: 1024px) {
  .hero h1 {
    font-size: 56px;
  }
}

@media (max-width: 900px) {
  .hero h1 {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 42px;
  }
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 38px;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 32px;
  }
}

/* Hero subtitle progressive */
@media (max-width: 1024px) {
  .hero-subtitle {
    font-size: 22px;
  }
}

@media (max-width: 900px) {
  .hero-subtitle {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .hero-subtitle {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .hero-subtitle {
    font-size: 16px;
  }
}

/* Titres sections progressifs */
@media (max-width: 900px) {
  .features-section h2,
  .solutions-hero h1,
  .tarifs-hero h1,
  .contact-hero h1 {
    font-size: 36px;
  }

  .about-card h2,
  .founder h2 {
    font-size: 26px;
  }
}

@media (max-width: 768px) {
  .features-section h2,
  .solutions-hero h1,
  .tarifs-hero h1,
  .contact-hero h1 {
    font-size: 32px;
  }

  .about-card h2,
  .founder h2 {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .features-section h2,
  .solutions-hero h1,
  .tarifs-hero h1,
  .contact-hero h1 {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .features-section h2,
  .solutions-hero h1,
  .tarifs-hero h1,
  .contact-hero h1 {
    font-size: 24px;
  }

  .about-card h2,
  .founder h2 {
    font-size: 20px;
  }
}

/* Line-height optimisé mobile pour meilleure lisibilité */
@media (max-width: 768px) {
  body {
    line-height: 1.6;
  }

  p {
    line-height: 1.7;
  }

  .hero-subtitle,
  .about-card p,
  .founder p,
  .feature-card p {
    line-height: 1.65;
  }
}

@media (max-width: 480px) {
  body {
    line-height: 1.65;
  }

  p {
    line-height: 1.75;
  }
}

/* Textes plus petits adaptés */
@media (max-width: 768px) {
  .feature-card h3 {
    font-size: 18px;
  }

  .feature-card p {
    font-size: 14px;
  }

  .proof-stat p,
  .footer-col ul li a,
  .footer-col address {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .feature-card h3 {
    font-size: 16px;
  }

  .feature-card p {
    font-size: 13px;
  }
}

/* ============================================
   TOUCH TARGETS OPTIMISÉS (≥44px WCAG AAA)
   ============================================ */

/* Tous les boutons et liens cliquables */
@media (max-width: 900px) {
  /* Boutons principaux */
  .btn-login,
  .btn-connect,
  .submit-btn,
  .btn-cta,
  .btn-benefices,
  .tab-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 24px;
  }

  /* CTA buttons hero */
  .cta-button {
    min-height: 56px;
    padding: 18px 40px;
  }

  .cta-button2,
  .cta-button3 {
    min-height: 52px;
    padding: 16px 32px;
  }

  /* Liens petits boutons (actuellement 11px font) */
  .btn-details,
  .btn-details2,
  .btn-details3 {
    min-height: 44px;
    font-size: 13px;
    padding: 12px 16px;
    gap: 8px;
  }

  /* Newsletter form */
  .newsletter-form input,
  .newsletter-form button {
    min-height: 48px;
    padding: 14px 20px;
  }

  /* Formulaire contact */
  .form-group input,
  .form-group select,
  .form-group textarea {
    min-height: 52px;
    padding: 16px 20px;
    font-size: 16px; /* Évite zoom auto iOS */
  }

  /* Social links */
  .social-links a {
    width: 44px;
    height: 44px;
  }

  .social-links img {
    width: 20px;
    height: 20px;
  }

  /* Founder cards touch areas */
  .founder-card {
    padding: 24px;
  }

  /* Feature cards */
  .feature-card {
    padding: 32px 20px;
    min-height: 140px;
  }
}

/* États actifs pour feedback tactile */
@media (max-width: 900px) {
  .btn-login:active,
  .btn-connect:active,
  .btn-cta:active,
  .btn-benefices:active,
  .cta-button:active,
  .cta-button2:active,
  .cta-button3:active {
    transform: scale(0.97);
    opacity: 0.9;
  }

  .feature-card:active {
    transform: translateY(-4px);
  }

  .tab-btn:active {
    transform: scale(0.98);
  }

  .social-links a:active {
    transform: scale(0.95);
  }
}

/* Espacement entre éléments cliquables */
@media (max-width: 768px) {
  .hero-features {
    gap: 12px;
  }

  .footer-col ul li {
    margin-bottom: 16px;
  }

  .nav {
    gap: 12px;
  }
}

/* ============================================
   PERFORMANCE MOBILE
   ============================================ */

/* Videos : désactivation autoplay préparée */
/* Note : Nécessite aussi modification HTML - voir instructions */

/* Optimisation images hero */
@media (max-width: 900px) {
  .hero-illustration,
  .hero-div video {
    object-fit: cover;
    object-position: center;
    max-height: 450px;
  }

  .hero-right {
    height: auto;
    max-height: 450px;
  }
}

@media (max-width: 768px) {
  .hero-illustration,
  .hero-div video {
    max-height: 380px;
  }

  .hero-right {
    max-height: 380px;
  }
}

@media (max-width: 600px) {
  .hero-illustration,
  .hero-div video {
    max-height: 320px;
  }

  .hero-right {
    max-height: 320px;
  }
}

@media (max-width: 480px) {
  .hero-illustration,
  .hero-div video {
    max-height: 280px;
  }

  .hero-right {
    max-height: 280px;
  }
}

/* Optimisation parallax mobile */
@media (max-width: 768px) {
  .parallax-section {
    height: 500px;
  }

  /* Désactiver will-change pour économiser mémoire */
  .parallax-image {
    will-change: auto;
  }
}

@media (max-width: 600px) {
  .parallax-section {
    height: 350px;
  }
}

@media (max-width: 480px) {
  .parallax-section {
    height: 280px;
  }
}

/* Optimisation animations mobile */
@media (max-width: 768px) {
  /* Réduire complexité animations */
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }

  /* Désactiver box-shadows complexes */
  .hero-illustration {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 12px;
  }

  .benefices-card {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 24px;
  }

  .feature-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
}



/* Prevent layout shift pendant chargement images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   OVERFLOW ET DÉBORDEMENTS CORRIGÉS
   ============================================ */

/* Retirer overflow-x hidden problématique */
@media (max-width: 768px) {
  body {
    overflow-x: visible; /* Au lieu de hidden */
    max-width: 100vw;
  }

  /* Forcer containment sur containers */
  .container,
  .header-content,
  .hero,
  .features-grid,
  .purpose-grid,
  .footer-content {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* White-space normal sur mobile */
  .cta-button,
  .cta-button2,
  .cta-button3,
  .btn-benefices {
    white-space: normal;
    text-align: center;
  }

  .nav-link {
    white-space: nowrap; /* Garder nowrap dans menu desktop */
  }
}

/* Container padding cohérent partout */
@media (max-width: 900px) {
  .about-section,
  .features-section,
  .solutions-section,
  .tarifs-section,
  .contact-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 600px) {
  .about-section,
  .features-section,
  .solutions-section,
  .tarifs-section,
  .contact-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ============================================
   FOOTER OPTIMISÉ
   ============================================ */

/* Footer grid progressive au lieu de brutal */
@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Newsletter form en colonne sur très petits écrans */
  .newsletter-form {
    flex-direction: column;
    gap: 12px;
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
  }
}

/* ============================================
   FOUNDERS GRID OPTIMISÉ
   ============================================ */

@media (max-width: 900px) {
  .founders-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .founders-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   AMÉLIORATIONS UX ADDITIONNELLES
   ============================================ */

/* Proof section optimisée */
@media (max-width: 900px) {
  .proof-section {
    flex-direction: column;
    gap: 32px;
    padding: 48px 24px;
  }

  .proof-stat h3 {
    font-size: 48px;
  }

  .proof-quote p {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .proof-section {
    padding: 32px 16px;
    gap: 24px;
  }

  .proof-stat h3 {
    font-size: 40px;
  }

  .proof-quote p {
    font-size: 15px;
  }
}

/* About card et founder optimisés */
@media (max-width: 768px) {
  .about-card,
  .founder {
    margin: 0 16px;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .about-card,
  .founder {
    margin: 0 12px;
    padding: 16px;
  }
}

/* Hero padding left optimisé progressivement */
@media (max-width: 1024px) {
  .hero-left {
    padding: 70px 50px;
  }
}

@media (max-width: 900px) {
  .hero-left {
    padding: 60px 40px;
  }
}

@media (max-width: 768px) {
  .hero-left {
    padding: 48px 32px;
  }
}

@media (max-width: 600px) {
  .hero-left {
    padding: 40px 24px;
  }
}

@media (max-width: 480px) {
  .hero-left {
    padding: 32px 20px;
  }
}

/* Arrow icon progressif */
@media (max-width: 1024px) {
  .arrow-icon {
    height: 80px;
  }
}

@media (max-width: 900px) {
  .arrow-icon {
    height: 70px;
  }
}

@media (max-width: 768px) {
  .arrow-icon {
    height: 60px;
  }
}

@media (max-width: 600px) {
  .arrow-icon {
    height: 50px;
  }
}

@media (max-width: 480px) {
  .arrow-icon {
    height: 40px;
  }
}

/* Hero features optimisés */
@media (max-width: 768px) {
  .hero-feature {
    font-size: 18px;
    padding: 12px 22px;
  }

  .hero-feature svg {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 600px) {
  .hero-feature {
    font-size: 16px;
    padding: 10px 18px;
  }

  .hero-feature svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .hero-feature {
    font-size: 14px;
    padding: 8px 16px;
  }

  .hero-feature svg {
    width: 20px;
    height: 20px;
  }
}

/* Tabs optimisés */
@media (max-width: 900px) {
  .tabs-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .tab-btn {
    padding: 12px 24px;
    font-size: 16px;
    flex: 1 1 auto;
    min-width: 140px;
  }
}

@media (max-width: 600px) {
  .tabs-wrapper {
    flex-direction: column;
    width: 100%;
    padding: 6px;
  }

  .tab-btn {
    width: 100%;
    padding: 14px 20px;
  }
}

/* ============================================
   FIN CORRECTIONS HAUTE PRIORITÉ
   Design desktop totalement préservé
   ============================================ */


/* À ajouter dans style.css ou style-high-priority-fixes.css */

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
}

.scroll-arrow {
  width: 24px;
  height: 24px;
  color: #000;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    opacity: 0.5;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(8px);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .scroll-indicator {
    bottom: 20px;
  }
  
  .scroll-arrow {
    width: 20px;
    height: 20px;
    animation: bounce 2.5s infinite; /* Plus lent sur mobile */
  }
}

/* Masquer sur très petits écrans */
@media (max-width: 480px) {
  .scroll-indicator {
    display: none; /* Trop d'espace gaspillé */
  }
}

/* Interactivité */
.scroll-indicator:hover .scroll-arrow {
  color: #aadf4f;
  animation-play-state: paused;
}

.scroll-indicator:active .scroll-arrow {
  transform: translateX(-50%) scale(0.9);
}